<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id = "myApp">
    {{message}}
    <div id="message">1</div>
    <div v-bind:id="message">1</div>
    <div :id="message">{{message + '3'}}</div>
    <div>
      <todo-list v-bind:list="list">
        <!-- <template slot> -->
          <todo-item v-for="(item,index) in list" v-bind:title="item.title" v-bind:del="item.del" v-on:click-parent="clickParent">
            <!-- <span slot="pre-icon">前置图标</span>
            <span slot="suff-icon">后置图标</span> -->
            <template v-slot:pre-icon="{value}">{{value}}前置图标</template>
            <template slot="suff-icon">后置图标</template>
            <template slot="suff-icon">---定制的</template>
          </todo-item>
        <!-- </template> -->
      </todo-list>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>

    Vue.component('todo-item', {
      props: {
        del: {
          type: Boolean,
          default: true
        },
        title: String
      },
      data: function () {
        return {
          itemValue: Math.random()
        }
      },
      methods: {
        clickItem(){
          console.log('item 点击删除')
          this.$emit('click-parent',this.title)
        }
      },
      template: `<li>
                  <slot name="pre-icon" :value="itemValue"></slot>
                  <span v-if="!del">{{title}}</span>
                  <span v-else style="text-decoration: line-through;">{{title}}</span>
                  <slot name="suff-icon"></slot>
                  <slot name="default">defaultValue</slot>
                  <button v-show="!del" @click.stop="clickItem">删除</button>
                </li>`
    })
    Vue.component('todo-list', {
      props: {
        // list: Array
      },
      data: function () {
        return {
          count: 0
        }
      },
      methods:{
        // clickParent(title){
        //   console.log('clickParent:', title)
        // }
      },
      template: `<ul>
        <slot></slot>
      </ul>`
    })
     let myVm = new Vue({
       el: '#myApp',
       data:{
         message: 'helloworld',
         list: [{
           title: 'java',
           del: true
         },{
           title: 'Php',
           del: false
         }]
         
       },
       methods: {
        clickParent(title){
          console.log('clickParent:', title)
        }
       }
     })
  </script>
</body>
</html>